<template>
  <div class="header">
    下单时间 | 订单编号 | 实付款 | 订单详情 | 状态
  </div>
  <div class="Order">
    <Order
        v-for="order in orders"
        :key="order.oid"
        :time="formatTime(order.otime)"
        :number="order.oid"
        :realPayment="order.realPayment"
        :status="order.ostate"
        @selectAllOrder="selectAll"
    >
    </Order>
  </div>


</template>

<script setup name="PurchaserOrder">
import Order from "@/components/OrderComponent.vue"
import {reactive, onMounted} from "vue";
import request from "@/utils/request";

const orders = reactive([])

onMounted(() => {
  selectAll()
})

function selectAll() {
  request.get("/t-order/getPurchaserOrders").then((resp) => {
    orders.length = 0
    orders.push(...resp.data)
  })
}

function formatTime(time) {
  let newTime = time.replace("T", " ")
  return newTime
}
</script>

<style scoped>
.header {
  background-color: white;
  border-radius: 10px;
  padding: 5px;
  font-size: 11px;
  word-spacing: 45px;
  text-align: center;
}

.Order {
  padding-bottom: 80px;
}
</style>
